<script setup lang="ts">
import { ref } from 'vue';
import { ITEM_RARITY_ORDER } from '../../../../game/data/item/type';
import { ItemReader } from '../../../../game/systems/item/reader';
import { rarityTextColorClass } from '../../../../utils';
import { EVENTS, GameKernel } from '../../../../game';
import { useBattle } from '../../../../composables';

const { state: battleState } = useBattle();

const open = ref(false);
const formState = ref({
  rarity: [...battleState.value.settings.rarity],
});
const rarityOptions = ITEM_RARITY_ORDER.map((item) => {
  return {
    label: ItemReader.getItemRarityName(item),
    value: item,
  };
});

function show() {
  formState.value.rarity = [...battleState.value.settings.rarity];
  open.value = true;
}

function hide() {
  open.value = false;
}

function onRarityChange() {
  GameKernel.inst.bus.emit(
    EVENTS.BATTLE_SET_AUTO_SELL_RARITY,
    formState.value.rarity
  );
}

defineExpose({
  show,
  hide,
});
</script>

<template>
  <a-modal
    v-model:open="open"
    wrap-class-name="experience-setting-modal hidden-title"
    :centered="true"
    :closable="false"
    :footer="null"
    :destroy-on-close="true"
  >
    <div class="py-2 font-bold">自动出售掉落装备</div>
    <div class="pb-2">
      <a-checkbox-group
        v-model:value="formState.rarity"
        class="w-full"
        @change="onRarityChange"
      >
        <div class="grid grid-cols-4 gap-1 w-full">
          <div v-for="rarity in rarityOptions" :key="rarity.value">
            <a-checkbox :value="rarity.value">
              <span :class="rarityTextColorClass(rarity.value)">
                {{ rarity.label }}
              </span>
            </a-checkbox>
          </div>
        </div>
      </a-checkbox-group>
    </div>
  </a-modal>
</template>

<style>
.experience-setting-modal .ant-modal .ant-modal-content {
  padding: 8px;
}
.experience-setting-modal.hidden-title .ant-modal .ant-modal-header {
  display: none;
}
</style>
